<template>
    <div class="fitness-project">
      <el-card>
        <!-- 搜索栏 -->
        <el-form :inline="true" class="search-form">
          <el-form-item label="项目名称">
            <el-input v-model="searchParams.projectName" placeholder="请输入项目名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchProjects">搜索</el-button>
          </el-form-item>
        </el-form>
  
        <!-- 添加项目按钮 -->
        <!-- <el-button type="primary" @click="openAddProjectDialog">添加项目</el-button> -->
  
        <!-- 项目列表 -->
        <el-table :data="projectList" style="width: 100%" class="project-table" v-loading="loading">
          <el-table-column prop="projectName" label="项目名称"></el-table-column>
          <el-table-column prop="unit" label="单位"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column prop="rate" label="占比"></el-table-column>
          <!-- <el-table-column label="操作">
            <template #default="scope">
              <el-button type="text" @click="editProject(scope.row)">编辑</el-button>
              <el-button type="text" @click="deleteProject(scope.row.project_id)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
  
        <!-- 分页 -->
        <el-pagination
          class="pagination"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handlePageChange"
        ></el-pagination>
      </el-card>
  
      <!-- 添加/编辑项目对话框 -->
      <el-dialog :title="dialogTitle" v-model="dialogVisible">
        <el-form :model="projectForm">
          <el-form-item label="项目名称">
            <el-input v-model="projectForm.projectName"></el-input>
          </el-form-item>
          <el-form-item label="单位">
            <el-input v-model="projectForm.unit"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input type="textarea" v-model="projectForm.description"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveProject">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { getFitnessProjectList, addFitnessProject, updateFitnessProject, deleteFitnessProject } from '@/api/fitnessProject'
  
  export default {
    data() {
      return {
        searchParams: { projectName: '' },
        projectList: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        loading: false,
        dialogVisible: false,
        dialogTitle: '添加项目',
        projectForm: {
          projectName: '',
          unit: '',
          description: ''
        }
      }
    },
    created() {
      this.fetchProjects()
    },
    methods: {
      async fetchProjects() {
        this.loading = true
        try {
          const response = await getFitnessProjectList({
            page: this.currentPage,
            size: this.pageSize,
            ...this.searchParams
          })
         response.data.records.map(project => {
                project.rate = project.rate * 100 + "%"
        })
          this.projectList = response.data.records
          this.total = response.total
        } catch (error) {
          this.$message.error('获取项目列表失败')
        } finally {
          this.loading = false
        }
      },
      searchProjects() {
        this.currentPage = 1
        this.fetchProjects()
      },
      openAddProjectDialog() {
        this.dialogTitle = '添加项目'
        this.projectForm = {}
        this.dialogVisible = true
      },
      editProject(project) {
        this.dialogTitle = '编辑项目'
        this.projectForm = { ...project }
        this.dialogVisible = true
      },
      async saveProject() {
        try {
          if (this.projectForm.project_id) {
            await updateFitnessProject(this.projectForm)
          } else {
            await addFitnessProject(this.projectForm)
          }
          this.$message.success('保存成功')
          this.dialogVisible = false
          this.fetchProjects()
        } catch (error) {
          this.$message.error('保存失败')
        }
      },
      async deleteProject(projectId) {
        try {
          await deleteFitnessProject(projectId)
          this.$message.success('删除成功')
          this.fetchProjects()
        } catch (error) {
          this.$message.error('删除失败')
        }
      },
      handlePageChange(page) {
        this.currentPage = page
        this.fetchProjects()
      }
    }
  }
  </script>
  <style scoped>
  .fitness-project {
    padding: 20px;
  }
  .search-form {
    margin-bottom: 20px;
  }
  .project-table {
    margin-top: 20px;
  }
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
  </style>